<template>
  <el-row :gutter="24">
    <el-col :span="3">
      <el-button type="primary" @click="reload">Reload</el-button>
    </el-col>
    <el-col :span="16"></el-col>
    <el-col :span="5">
      <el-button type="primary" @click="showAdd">Add</el-button>
    </el-col>
  </el-row>
  <el-table :data="data.list" style="width: 100%">
    <el-table-column prop="id" label="ID" width="100" />
    <el-table-column prop="name" label="Name" />
    <el-table-column prop="skillOne" label="SkillOne" />
    <el-table-column prop="skillTwo" label="SkillTwo" />
    <el-table-column prop="skillThree" label="SkillThree" />
    <el-table-column prop="skillFour" label="SkillFour" />
    <el-table-column label="Op">
      <template #default="scope">
        <el-button type="primary" @click="showEdit(scope.row)">Edit</el-button>
        <el-button type="primary" @click="del(scope.row.id)">Delete</el-button>
      </template>
    </el-table-column>
  </el-table>
  <el-dialog v-model="visible" :title="isEdit ? 'Edit' : 'Add'">
    <el-form ref="refForm" :model="form" :rules="rules">
      <el-form-item label="Name" label-width="100px" prop="name">
        <el-input v-model="form.name" autocomplete="off" />
      </el-form-item>
      <el-form-item label="Forces" label-width="100px" prop="forces">
        <el-input v-model="form.forces" autocomplete="off" />
      </el-form-item>
      <el-form-item label="SkillOne" label-width="100px" prop="skillOne">
        <el-input v-model="form.skillOne" autocomplete="off" />
      </el-form-item>
      <el-form-item label="SkillTwo" label-width="100px" prop="skillTwo">
        <el-input v-model="form.skillTwo" autocomplete="off" />
      </el-form-item>
      <el-form-item label="SkillThree" label-width="100px" prop="skillThree">
        <el-input v-model="form.skillThree" autocomplete="off" />
      </el-form-item>
      <el-form-item label="SkillFour" label-width="100px" prop="skillFour">
        <el-input v-model="form.skillFour" autocomplete="off" />
      </el-form-item>
      <!-- <el-form-item label="Forces" :label-width="formLabelWidth">
        <el-select v-model="form.region" placeholder="Please select a zone">
          <el-option label="Zone No.1" value="shanghai" />
        </el-select>
      </el-form-item> -->
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="cancel(refForm)">Cancel</el-button>
        <el-button type="primary" @click="save(refForm)">Save</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import useCurrentInstance from "@/hooks/useCurrentInstance";
import { ElMessage } from "element-plus";
const { reactive, ref, onMounted } = require("vue-demi");

const { globalProperties } = useCurrentInstance();

const rules = reactive({
  name: [{ required: true, message: "Please input name", trigger: "blur" }],
  forces: [{ required: true, message: "Please input forces", trigger: "blur" }],
  skillOne: [
    { required: true, message: "Please input skillOne", trigger: "blur" },
  ],
});
const refForm = ref();

let form = reactive({
  name: "",
  forces: "",
  skillOne: "",
  skillTwo: "",
  skillThree: "",
  skillFour: "",
});

let visible = ref(false);
let isEdit = ref(false);
let editId = ref("");

let data = reactive({
  list: [],
});

async function getList() {
  let res = await globalProperties?.$api["heroList"]();
  data.list = [...res.data.data];
}

function showAdd() {
  isEdit.value = false;
  visible.value = true;
}

function showEdit(item) {
  isEdit.value = true;
  editId.value = item.id;
  form.name = item.name;
  form.forces = item.forces;
  form.skillOne = item.skillOne;
  form.skillTwo = item.skillTwo;
  form.skillThree = item.skillThree;
  form.skillFour = item.skillFour;
  visible.value = true;
}

function reload() {
  getList();
}

function cancel(formEl) {
  if (!formEl) return;
  formEl.resetFields();
  visible.value = false;
}

function save(formEl) {
  if (!formEl) return;
  formEl.validate(async (valid) => {
    if (valid) {
      if (isEdit.value) {
        let { data } = await globalProperties?.$api["editHero"]({
          ...form,
          id: editId.value,
        });
        if (data.code == 0) {
          ElMessage.success("update successfully!");
          formEl.resetFields();
          visible.value = false;
          getList();
        } else {
          ElMessage.error(data.message);
        }
      } else {
        let { data } = await globalProperties?.$api["addHero"]({ ...form });
        if (data.code == 0) {
          ElMessage.success("add successfully!");
          visible.value = false;
          getList();
        } else {
          ElMessage.error(data.message);
        }
      }
    }
  });
}

onMounted(() => {
  getList();
});
</script>